<!--
 * @Author: zjj
 * @Date: 2019-11-29 14:49:10
 * @LastEditors: zjj
 * @LastEditTime: 2019-12-03 19:49:26
 -->
<!--  -->
<template>
  <div class="fliter">
    <Nav title="条件筛选">
      <template v-slot:left>
        <span class="back" @click="$router.back()"></span>
      </template>
    </Nav>
    <div class="body">
      <div class="fliter-item">
        <div class="label">按层级显示</div>
        <div class="fliter-list flex">
          <span class="item" :class="c_index1==0?'item-selected':''" @click="select1(0)">直接粉丝</span>
          <span class="item" :class="c_index1==1?'item-selected':''" @click="select1(1)">间接粉丝</span>
        </div>
      </div>
      <div class="fliter-item">
        <div class="label">排序选择</div>
        <div class="fliter-list flex">
          <span class="item" :class="c_index2==0?'item-selected':''" @click="select2(0)">按本月收益排列</span>
          <span class="item" :class="c_index2==1?'item-selected':''" @click="select2(1)">按累计收益排列</span>
          <span
            class="item"
            :class="c_index2==2?'item-selected':''"
            @click="select2(2)"
          >按本月下单量排列</span>
          <span
            class="item"
            :class="c_index2==3?'item-selected':''"
            @click="select2(3)"
          >按累计下单量排列</span>
        </div>
      </div>
      <div class="option-wrapper flex">
        <span class="reset flex justify-center aligin-center" @click="reset">重置</span>
        <span class="confirm flex justify-center aligin-center" @click="confirm">确认</span>
      </div>
    </div>
  </div>
</template>

<script>
import Nav from "../../components/Nav";
export default {
  components: { Nav },
  data() {
    return {};
  },
  computed: {
    c_index1() {
      switch (this.$store.state.pos) {
        case "pos-1":
          return 0;
        case "pos-2":
          return 1;
        default:
          return -1;
      }
    },
    c_index2() {
      switch (this.$store.state.order) {
        case "order-1":
          return 0;
        case "order-2":
          return 1;
        case "order-3":
          return 2;
        case "order-4":
          return 3;
        default:
          return -1;
      }
    }
  },
  watch: {},
  methods: {
    reset() {
      this.$store.commit("changePos", "");
      this.$store.commit("changeOrder", "");
    },
    confirm() {
      this.$router.back();
    },
    select1(index) {
      switch (index) {
        case 0:
          this.$store.commit("changePos", "pos-1");
          break;
        case 1:
          this.$store.commit("changePos", "pos-2");
          break;
      }
    },
    select2(index) {
      switch (index) {
        case 0:
          this.$store.commit("changeOrder", "order-1");
          break;
        case 1:
          this.$store.commit("changeOrder", "order-2");
          break;
        case 2:
          this.$store.commit("changeOrder", "order-3");
          break;
        case 3:
          this.$store.commit("changeOrder", "order-4");
          break;
      }
    }
  },
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.fliter {
  height: 100%;
  .body {
    padding: 0 20px;
    .fliter-item {
      margin-top: 29px;
    }
    .label {
      font-size: 14px;
      color: #666666;
    }
    .fliter-list {
      margin-top: 20px;
      flex-wrap: wrap;
      .item {
        padding: 10px 12px;
        margin-right: 13px;
        margin-bottom: 13px;
        font-size: 14px;
        color: #b2b2b2;
        border: 2px solid rgba(230, 230, 230, 1);
        border-radius: 3px;
      }
      .item-selected {
        color: #ff4d4d;
        background: rgba(254, 112, 121, 0.2);
        border: 2px solid rgba(232, 48, 56, 1);
        border-radius: 3px;
      }
    }
    .option-wrapper {
      margin-top: 75px;
      font-size: 16px;
      font-weight: 500;
      color: #fff;
      .reset {
        margin-right: 16px;
        width: 105px;
        height: 41px;
        background: rgba(210, 210, 210, 1);
        border-radius: 3px;
      }
      .confirm {
        width: 214px;
        height: 41px;
        background: linear-gradient(
          90deg,
          rgba(232, 48, 56, 1) 0%,
          rgba(247, 88, 151, 1) 100%
        );
        border-radius: 3px;
      }
    }
  }
}
</style>